<template>
  <div id="popuparea">
    <transition name="fade">
      <div id="popup" v-show="this.$store.getters.tianqiflagxdata.ids">
        <div class="itie">公告する</div>
        <div class="text">
          <p class="jies">{{ dwmc }}</p>
          <div id="myChart" :style="{ width: '40vw', height: '40vh' }"></div>
        </div>
        <div class="cancel">
          <img
            src="../assets/img/tianming/captain.png"
            alt=""
            width="100%"
            @click="cancel"
          />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { ditu } from "../utis/amap";
import { tianqiapi } from "@/api/tianqiapi";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      show: false,
      dwmc: '郑州',
      tianqiday: [],
      tianqitem1: [],
      tianqitem2: [],
      tianqiwea: [],
    };
  },
  beforeMount() {
    this.tianqidinwei();
  },
  methods: {
    // 定位，移动端不生效
    tianqidinwei() {
      let geolocation = ditu.initMap("map-container"); 
      var dwflag = true
      AMap.event.addListener(geolocation, "complete", (result) => {
        let data = result.addressComponent.city
        dwflag = false
        data = data.substr(0, data.length - 1);
        setTimeout(()=>{
          this.dwmc = data
          this.tianqiapif(data);
        },1000)
      });
      setTimeout(()=>{
        if(dwflag){
          this.tianqiapif("郑州");
        }
      },2000)
    },
    // 绘图数据
    tianqiapif(result) {
      console.log(result);
      tianqiapi(result).then((res) => {
        console.log(res);
        this.tianqidata = res.data;
        this.tianqiday = this.tianqidata.data.map((index) => {
          return index.day;
        });
        this.tianqitem1 = this.tianqidata.data.map((index) => {
          let data = index.tem1;
          data = data.substr(0, data.length - 1);
          return data;
        });
        this.tianqitem2 = this.tianqidata.data.map((index) => {
          let data = index.tem2;
          data = data.substr(0, data.length - 1);
          return data;
        });
        this.tianqiwea = this.tianqidata.data.map((index) => {
          let data = index.wea;
          data = data.substr(0, data.length - 1);
          return data;
        });
        this.tianqoption();
      });
      setTimeout(() => {
        this.show = false;
      }, 1000);
    },
    // 绘制图表
    tianqoption() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      
      let option = {
        title: {
          text: "找个好天气约约吧",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.tianqiday,
          },
          {
            type: "category",
            boundaryGap: false,
            data: this.tianqiwea,
          },
        ],
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} °C",
          },
        },
        series: [
          {
            name: "高温",
            type: "line",
            data: this.tianqitem1,
            markPoint: {
              data: [
                { type: "max", name: "高温" },
                { type: "min", name: "低温" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "低温",
            type: "line",
            data: this.tianqitem2,
            markLine: {
              data: [
                { type: "average", name: "Avg" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      position: "start",
                      formatter: "Max",
                    },
                    type: "max",
                    name: "高温",
                  },
                ],
              ],
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    // 取消
    cancel() {
      console.log(this.tianqiflagxdata());
      this.tianqifun({ids : false})
    },
    ...mapMutations(['tianqifun']),
    ...mapGetters(['tianqiflagxdata'])
  },
};
</script>

<style lang="less" scoped>

.dak {
  width: 1rem;
  height: 1rem;
  border: 0.05rem solid pink;
  border-radius: 50%;
  background-color: #fff;
  z-index: 19;
  background-size: 100% 100%;
}
#popup {
  width: 40vw;
  height: 80vh;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 5px #ffffff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  overflow: auto;
  .itie {
    width: 90%;
    margin: 0 auto;
    padding: 5%;
    font-size: 0.4rem;
    text-align: center;
  }
  .text {
    width: 100%;
    font-size: 0.15rem;
    margin: 0 auto;
    overflow: hidden;
    .tianqi {
      width: 100%;
      display: flex;
      justify-content: space-between;
      p {
        width: 25%;
        margin-top: 00.15rem;
      }
    }
    .jies {
      margin-top: 00.15rem;
    }
  }
  .cancel {
    width: 10%;
    position: absolute;
    top: 5%;
    right: 5%;
    transform: rotate(20deg);
  }
}
.fade-enter {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active {
  transition: all 0.8s ease;
}
.fade-leave-active {
  transition: all 0.8s ease;
}
</style>